<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script type="text/javascript" src="vue.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>

<div id="app">
    <div>
        <el-input  v-model="info.gname" placeholder="商品名称" style="display: inline-block; width: 200px;">
        </el-input>
        <el-input type="date" v-model="info.orderdate" placeholder="订单日期" style="display: inline-block; width: 200px;">
        </el-input>
        <el-button icon="el-icon-search" circle @click="search()"></el-button>
    </div>
    <el-table :data="orderArr" border style="width: 100%">
        <el-table-column prop="soid" label="订单编号">
        </el-table-column>
        <el-table-column prop="store.sname" label="店铺名">
        </el-table-column>
        <el-table-column prop="storeGoods.gname" label="商品名">
        </el-table-column>
        <el-table-column prop="storeGoods.img" align="center" label="商品图片">
            <template slot-scope="scope">
                <img :src="scope.row.storeGoods.img" style="width: 100px;height: 100px">
            </template>
        </el-table-column>
        <el-table-column prop="adminSo.num" label="数量">
        </el-table-column>
        <el-table-column prop="storeGoods.sprice" label="单价">
        </el-table-column>
        <el-table-column prop="adminSo.price" label="总价">
        </el-table-column>
        <el-table-column prop="orderdate" label="订单日期">
        </el-table-column>
        <el-table-column prop="orderState.state" label="订单状态">
        </el-table-column>
    </el-table>

    <el-pagination @current-change="handleCurrentChange" background layout="prev, pager, next" :total=pageTotal>
    </el-pagination>
    <el-button type="success" plain @click="back()">返回首页</el-button>


</div>
<script>
    var app=new Vue({
        el: "#app",
        data: {
            info:{},
            orderArr:[],
            pageTotal:0
        },
        methods: {
            back:function(){
                window.location.href = "/cai/indexTwo.html";
            },
            handleCurrentChange:function (val) {
                getInfo(val,10);
            },
            search:function () {
                getInfo(1,10);
            }
        }
    });
    function getInfo(a,b) {
        app.info.pageNo = a;
        app.info.pageCount = b;
        $.post("/cai/userOrder/list",app.info,function(backData){
            app.orderArr = backData.data.currentData;
            app.pageTotal = backData.data.currentDataTotal;
        });
    }
    getInfo(1,10);

</script>
</body>
</html>